<template>
    <div class="box">
        <div id="main"></div>
        <div></div>
    </div>
</template>

<script setup lang="ts">
import useType from '../store/type'
import { onMounted } from 'vue'
//按需引入echarts
import * as echarts from 'echarts/core';
import {
    TitleComponent,
    TitleComponentOption,
    ToolboxComponent,
    ToolboxComponentOption,
    TooltipComponent,
    TooltipComponentOption,
    GridComponent,
    GridComponentOption,
    LegendComponent,
    LegendComponentOption
} from 'echarts/components';
import { LineChart, LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition
]);

type EChartsOption = echarts.ComposeOption<
    | TitleComponentOption
    | ToolboxComponentOption
    | TooltipComponentOption
    | GridComponentOption
    | LegendComponentOption
    | LineSeriesOption
>;
const store = useType()

//echarts画图
const pie = (series: Array<LineSeriesOption> | undefined, data: string[]) => {
    let chartDom = document.getElementById('main')!;
    let myChart = echarts.init(chartDom);
    let option: EChartsOption;

    option = {
        // title: {
        //     text: 'Stacked Line'
        // },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data,
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [
                1992, 1993, 1994, 1995, 1996,
                1997, 1998, 1999, 2000, 2001,
                2002, 2003, 2004, 2005, 2006,
                2007, 2008, 2009, 2010, 2011,
                2012, 2013, 2014, 2015, 2016,
                2017, 2018, 2019, 2020, 2021,
                2022
            ]
        },
        yAxis: {
            type: 'value'
        },
        series,
    };

    option && myChart.setOption(option);

}
//通知store发送请求，并获得返回数据,需要先数据返回，需要异步
const paint = async () => {
    await store.append()
    pie(store.data, store.typeData)
}
//在生命周期钩子中调用stroe方法
onMounted(() => {
    paint()
})
</script>

<style scoped lang="less">
.box {
    height: 100vh;

    #main {
        height: 100%;
    }
}
</style>